<template>
  <div class="product-desc" v-if="Object.keys(detail).length">
    <!--商品价格，已售数目开始-->
    <div class="price-and-count">
      <div class="price">￥{{detail.price.price.priceText}}</div>
      <div class="sold-count" v-if="detail.priceSectionData">{{detail.priceSectionData.mainBelt.soldCount.text}}</div>
    </div>
    <!--商品价格，已售数目开始-->
    <!--商品名称开始-->
    <h3 class="product-name">{{detail.item.title}}</h3>
    <!--商品名称结束-->
    <!--包邮信息，月销量，商品配送地开始-->
    <div class="delivery-and-sales-volume">
      <div class="delivery">{{detail.delivery.postage}}</div>
      <div class="sales-volume">月销量:{{detail.item.vagueSellCount}}</div>
      <div class="delivery-address">{{detail.delivery.from}}</div>
    </div>
    <!--包邮信息，月销量，商品配送地址结束-->
  </div>
</template>
<script>
export default {
  name: 'productDesc',
  props: {
    info: Object
  },
  data () {
    return {
      detail: {}
    }
  },
  watch: {
    info (value) {
      console.log('处理以前', value)
      this.detail = JSON.parse(this.info.apiStack[0].value)
      console.log('处理以后', this.detail)
    }
  }
}
</script>
<style lang="stylus" scoped>
.product-desc
  border-bottom 10px #eee solid
  .price-and-count
    padding 0 10px
    background linear-gradient(180deg, rgba(220,20,60,0.5), rgba(255,105,180,0.5))
    display flex
    justify-content space-between
    align-items center
    height 35px
    color #fff
    .price
      font-size 20px
    .sold-count
      padding 5px
      background rgba(199,21,133,0.4)
      font-size 14px
  .product-name
    padding 0 10px
    color black
    font-size 16px
    margin 10px 0 20px 0
    line-height 1.5
  .delivery-and-sales-volume
    padding 0 10px 10px
    color #ababab
    display flex
    justify-content space-between
    font-size 12px
</style>
